<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/document.css" rel="stylesheet" />
		<link href="../css/customize.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<style>
			#select {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20px;
				margin-bottom: 20px;
			}

			#select img {
				border-radius: 50%;
				width: 75px;
				height: 75px;

			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left font-black"></a>
			<h1 class="mui-title">个人信息</h1>
		</header>

		<div class="mui-content">
			<div class="mui-content-padded">
				<div id="myInfo" class="form-container">
					<div id="select">
						<img src="../image/logo.png" alt="" id="avatar">
					</div>

					<div class="row">
						<div style="margin-right: 20px;">真实姓名</div>
						<div style="flex: 2;">
							<input type="text" style="margin: 0;border: 0;" placeholder="请输入姓名" id="name">
						</div>
					</div>

					<div class="row">
						<div style="margin-right: 20px;">身份证号</div>
						<div style="flex: 2;">
							<input type="text" style="margin: 0;border: 0;" placeholder="请输入身份证号" id="cardNo">
						</div>
					</div>

					<div class="row">
						<div style="margin-right: 20px;">联系电话</div>
						<div style="flex: 2;">
							<input type="text" style="margin: 0;border: 0;" placeholder="请输入联系电话" id="phone">
						</div>
					</div>

					<div class="row">
						<div style="margin-right: 20px;">现居地址</div>
						<div style="flex: 2;">
							<input type="text" style="margin: 0;border: 0;" placeholder="请输入现居地址"
								id="residentialAddress">
						</div>
					</div>

					<div class="row">
						<div style="margin-right: 20px;">户籍地址</div>
						<div style="flex: 2;">
							<input type="text" style="margin: 0;border: 0;" placeholder="请输入户籍地址" id="permanentAddress">
						</div>
					</div>

					<div class="row">
						<div style="margin-right: 20px;">性别</div>
						<div style="flex: 2;" class="higher">
							<div style="text-align: center;" id="gender">请选择性别</div>
						</div>
						<div>
							<img src="../image/down.png" alt="" style="transform: scale(0.8);">
						</div>
					</div>


					<div class="row">
						<div style="margin-right: 20px;">出生日期</div>
						<div style="flex: 2;text-align: center;">
							<div style="" id="chooseDate"
								data-options='{"type":"date","beginYear":1900,"endYear":2023}'>
								选择日期
							</div>
						</div>

					</div>

					<div class="row">
						<div style="margin-right: 20px;">籍贯</div>
						<div style="flex: 2;">
							<input type="text" style="margin: 0;border: 0;" placeholder="请输入籍贯" id="nativePlace">
						</div>
					</div>

					<div class="row">
						<div style="margin-right: 20px;">民族</div>
						<div style="flex: 2;" class="higher">
							<div style="text-align: center;" id="nation">请选择民族</div>
						</div>
						<div>
							<img src="../image/down.png" alt="" style="transform: scale(0.8);">
						</div>
					</div>

					<button class="mui-btn mui-btn-green mui-btn-block" id="save">
						保存
					</button>

				</div>

			</div>
		</div>
	</body>
</html>
<script src="../js/photo.js"></script>
<script src="../js/request.js"></script>
<script src="../js/mui.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/storage.js"></script>
<script type="text/javascript">
	//定义全局变量
	let ip = localStorage.getItem("ip")
	let imgurl = ""
	let sex = -1;
	let nation = -1;
	//获取当前登录用户
	let user = userCache.getUser();

	let sexList = [{
		title: "男"
	}, {
		title: "女"
	}];
	let nationList = [{
		title: "汉族"
	}, {
		title: "回族"
	}, {
		title: "维吾尔族"
	}, {
		title: "壮族"
	}, {
		title: "其他少数民族"
	}];

	(function($) {
		$.init();
		var btns = $('#chooseDate');
		btns.each(function(i, btn) {
			btn.addEventListener(
				'tap',
				function() {
					var _self = this;
					if (_self.picker) {
						_self.picker.show(function(rs) {
							document.querySelector("#chooseDate").innerText = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					} else {
						var optionsJson = this.getAttribute('data-options') || '{}';
						//var options = JSON.parse(optionsJson);
						var options = {
							"type": "date",
							beginDate: new Date(1900, 0, 1),
							endDate: new Date(),
						}
						var id = this.getAttribute('id');
						_self.picker = new $.DtPicker(options);
						_self.picker.show(function(rs) {
							document.querySelector("#chooseDate").innerText = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					}
				},
				false
			);
		});
	})(mui);

	//选择性别事件处理
	mui("body").on("tap", "#gender", function(event) {

		plus.nativeUI.actionSheet({
			title: "选择性别", //这里就是这个弹窗的titlesaveHe
			cancel: "取消", //取消按钮
			buttons: sexList
		}, function(b) {
			if (b.index > 0) {
				sex = b.index - 1
				document.getElementById("gender").innerHTML = sexList[b.index - 1]
					.title
			}
		})
	})

	//点击保存按钮事件处理
	mui("body").on("tap", "#save", function(event) {

		let data = {
			"sysUserId": user.userId,
			"photoUrl": imgurl,
			"realName": document.querySelector("#name").value,
			"cardNo": document.querySelector("#cardNo").value,
			"phone": document.querySelector("#phone").value,
			"residentialAddress": document.querySelector("#residentialAddress")
				.value,
			"permanentAddress": document.querySelector("#permanentAddress")
				.value,
			"sex": sex,
			"birthday": document.querySelector("#chooseDate").innerText ==
				"选择日期" || "" ? "" : document.querySelector("#chooseDate")
				.innerText,
			"nativePlace": document.querySelector("#nativePlace").value,
			"nation": nation,
		}

		request.post('/system/acwUser/', data, (data) => {
			//提交成功回调
			console.log('调用服务端更新用户信息成功');
			mui.toast("保存成功")
		}, (error, thrown) => {
			//发生错误时，回调
			console.error('调用服务端更新用户信息失败', error);
			mui.toast("接口调用失败,请联系系统管理员")
		})
	})
	//选择民族事件处理
	mui("body").on("tap", "#nation", function(event) {
		plus.nativeUI.actionSheet({
			title: "选择民族", //这里就是这个弹窗的title
			cancel: "取消", //取消按钮
			buttons: nationList
		}, function(b) {
			if (b.index > 0) {
				nation = b.index - 1
				document.getElementById("nation").innerHTML = nationList[b.index - 1]
					.title
			}

		})
	})

	document.querySelector("#select").addEventListener("tap", function() {
		TakePhoto.MakePhoto({
			Title: '选择文件',
			Success: function(data) {
				var imgPath = data;
				TakePhoto.UploadImage({
					imgPath: imgPath,
					url: ip + '/common/upload',
					Success: function(res) {
						console.log(res);
						res = JSON.parse(res);
						imgurl = res.url.replace(ip, "")
						document.querySelector("#avatar").src = res.url;
					}
				});
			}
		});
	})
	//获取当前用户的个人信息
	function loadUserInfo() {
		let data = {
			"sysUserId": user.userId,
		}
		request.get('/system/acwUser/list', data, (data) => {
			//提交成功回调
			console.log('调用服务端获取用户信息成功');
			let list = data.rows;
			if (list && list.length > 0) {
				let info = list[0];
				document.querySelector("#name").value = info.realName;
				document.querySelector("#cardNo").value = info.cardNo;
				document.querySelector("#phone").value = info.phone;
				document.querySelector("#residentialAddress").value = info.residentialAddress;
				document.querySelector("#permanentAddress").value = info.permanentAddress;
				document.querySelector("#chooseDate").innerText = info.birthday;
				document.querySelector("#nativePlace").value = info.nativePlace;
				document.querySelector("#avatar").src = ip + info.photoUrl;
				document.querySelector("#nation").innerHTML = nationList[info.nation].title;
				document.querySelector("#gender").innerHTML = sexList[info.sex].title;
			}
		}, (error, thrown) => {
			//发生错误时，回调
			console.error('调用服务端获取用户信息失败', error);
		})
	}

	loadUserInfo();
</script>